<template>
  <div class="filter">
    <div class="filter_left">{{ title }}：</div>
    <div ref="filterContent" class="filter_content" :class="{'collapse':isCollapse}">
      <div class="filter_content_item all" v-if="!isMultiple" @click="changeParams('')"
           :class="{'active':params.length===0}">
        全部
      </div>
      <div class="filter_content_item" v-for="item in data" :key="item[valueKey]"
           @click="changeParams(item[valueKey])"
           :class="{'active':params.includes(item[valueKey])}">
        <a-checkbox v-if="isMultiple" :checked="tempParams.includes(item[valueKey])"></a-checkbox>
        {{ item[displayKey] }}
      </div>
      <div v-if="isMultiple" style="width: 100%;text-align: center;margin-bottom: 20px;">
        <a-button type="primary" @click="confirmMultiple">确认</a-button>
        <a-button @click="cancelMultiple">取消</a-button>
      </div>
    </div>
    <div v-if="showCollapse&&data.length>1" class="filter_btn" :class="{'up':!isCollapse,'down':isCollapse}"
         @click="isCollapse = !isCollapse">
      {{ isCollapse ? '更多' : '收起' }}
      <a-icon type="down"/>
    </div>
    <div class="filter_btn" @click="changeMultiple" v-if="data.length>1">
      多选
      <a-icon :type="isMultiple?'minus':'plus'"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterItem',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    displayKey: {
      type: String,
      default: 'name'
    },
    valueKey: {
      type: String,
      default: 'code'
    },
    title: '',
    defaultParams: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      params: [],
      tempParams: [],
      isMultiple: false,
      isCollapse: true,
      showCollapse:false
    }
  },
  watch: {
    defaultParams: {
      handler (newVal) {
        this.params = [...newVal]
        this.tempParams = [...this.params]
      },
      immediate: true,
      deep:true
    },
    data:{
      handler(newVal){
        if(newVal&&newVal.length>0){
          this.$nextTick(()=>{
            const width = this.$refs.filterContent.scrollWidth
            if(width>1014){
              this.showCollapse = true
            }
          })
        }
      },
      immediate: true,
      deep:true
    }
  },
  methods: {
    changeMultiple () {
      this.isMultiple = !this.isMultiple
      if (this.isMultiple) {
        this.isCollapse = false
        this.tempParams = [...this.params]
      } else {
        this.cancelMultiple()
      }
    },
    cancelMultiple () {
      this.tempParams = this.params
      this.tempParams.splice(0, 0)
      this.isMultiple = false
    },
    confirmMultiple () {
      this.params = this.tempParams
      this.isMultiple = false
      this.$emit('ok', this.params)
    },
    changeParams (id) {
      if (this.isMultiple) {
        // 多选
        const index = this.tempParams.indexOf(id)
        if (index !== -1) {
          // 取消选择
          this.tempParams.splice(index, 1)
        } else {
          this.tempParams.push(id)
        }
      } else {
        // 单选
        if (id) {
          const index = this.params.indexOf(id)
          if (index !== -1) {
            // 取消选择
            this.params.splice(index, 1)
          } else {
            this.params = [id]
          }
        } else {
          // 选择全部
          this.params = []
        }
        this.$emit('ok', this.params)
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/css/constants";

.filter {
  margin: 0 20px;
  border-bottom: 1px dashed #E2E2E2;
  display: flex;
  align-items: flex-start;

  &:last-child {
    border-bottom: none;
  }

  &_left {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    width: 100px;
    font-weight: 500;
    color: #323232;
    text-align: left;
    line-height: 50px;
  }

  &_content {
    flex: 1;
    width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    &.collapse {
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow: hidden;
    }

    &_item {
      border-radius: 13px;
      border: 1px solid transparent;
      color: #323232;
      line-height: 12px;
      padding: 19px 30px 19px 0;
      cursor: pointer;

      &.all {
        line-height: 12px;
        padding: 7px 14px;
        margin-right: 30px;

        &:hover {
          border-color: $mainColor;
        }

        &.active {
          border-color: $mainColor;
        }
      }

      &:hover {
        color: $mainColor;
      }

      &.active {
        color: $mainColor;
      }
    }
  }

  &_btn {
    user-select: none;
    margin: 0 5px;
    line-height: 50px;
    background-color: white;
    cursor: pointer;

    &:hover {
      color: $mainColor;
    }

    &.down {
      i {
        rotate: 0deg;
        transition: rotate .3s;
      }
    }

    &.up {
      i {
        rotate: 180deg;
        transition: rotate .3s;
      }
    }
  }
}
</style>
